<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>一般过程申请</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px; overflow: auto;">
                    <p-tabView>
                        <p-tabPanel header="申请单">
                            <div class="align-items-center" style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="code">申请单号 *</label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <input id="code" #codeInput="ngModel" type="text" name="code" class="form-control"
                                            [(ngModel)]="workflow.code" disabled maxlength="256" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="technicalQualityAgreementCode">技术质量协议编号 *</label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <input id="technicalQualityAgreementCode" #technicalQualityAgreementCodeInput="ngModel"
                                            type="text" name="technicalQualityAgreementCode" class="form-control"
                                            [(ngModel)]="workflow.technicalQualityAgreementCode" required maxlength="256" />
                                        <validation-messages [formCtrl]="technicalQualityAgreementCodeInput"></validation-messages>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="supplierUnit">供方单位 *</label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <p-multiSelect [options]="SupplierAyy" [resetFilterOnHide]='true'
                                            [selectionLimit]=3 name='supplierUnit' [(ngModel)]="suppliers" [panelStyle]="{minWidth:'12em'}" defaultLabel="请选择"></p-multiSelect>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="flowExplain">外协原因</label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <textarea pInputTextarea name="flowExplain" class="form-control" [rows]="6"
                                            autoResize="autoResize" [(ngModel)]="workflow.explain"></textarea>
                                    </div>
                                </div>
                            </div>
                        </p-tabPanel>
                        <p-tabPanel header="外包项目">
                            <div style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;">
                                <p-panel header="任务筛选" [toggleable]="true">
                                    <div class="col-xl-12" style="padding-right: 0px; padding-left: 0px;">
                                        <div class="form-group m-form__group">
                                            <div class="input-group">
                                                <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                                                    style="border-right: none;" [placeholder]="l('请输入关键字')" type="text">
                                                <span class="input-group-btn">
                                                    <button (click)="getTasks()" class="btn btn-primary"><i class="flaticon-search-1"
                                                            [attr.aria-label]="l('Search')"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="overflow: auto;">
                                        <div class="align-items-center">
                                            <!--<Primeng-TurboTable-Start>-->
                                            <div class="primeng-datatable-container">
                                                <p-table #taskdataTable [value]="primengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                                    [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                                    [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns">
                                                    <ng-template pTemplate="header">
                                                        <tr>
                                                            <th style="width: 50px">操作</th>
                                                            <th style="width: 130px">任务号</th>
                                                            <th style="width: 130px">名称</th>
                                                            <th style="width: 130px">图号</th>
                                                            <th style="width: 130px"> 型号 </th>
                                                            <th style="width: 80px">数量 </th>
                                                            <th style="width: 150px"> 交付时间</th>
                                                            <th style="width: 120px">已外协申请数量</th>
                                                            <!-- <th style="width: 120px"> 交付/加工</th> -->
                                                            <th style="width: 200px">备注</th>
                                                        </tr>
                                                    </ng-template>
                                                    <ng-template pTemplate="body" let-record="$implicit">
                                                        <tr>
                                                            <td style="width: 50px">
                                                                <button pButton type="button" icon="pi pi-plus" class="ui-button-info"
                                                                    style="margin-right: .5em" (click)="joinTask(record)"></button>
                                                            </td>
                                                            <td style="width: 130px">
                                                                {{record.taskCode}}
                                                            </td>
                                                            <td style="width: 130px">
                                                                {{record.drawingName}}
                                                            </td>
                                                            <td style="width: 130px">
                                                                {{record.drawingCode}}
                                                            </td>
                                                            <td style="width: 130px">
                                                                {{record.modelCode}}
                                                            </td>
                                                            <td style="width: 80px">
                                                                {{record.totalQuantity}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{record.dueDate | momentFormat:'L'}}
                                                            </td>
                                                            <td style="width: 120px">
                                                                <div [ngSwitch]="record.outsourcingApplyAmount">
                                                                    <div *ngSwitchCase="">
                                                                        <div class="m-loader m-loader--warning" style="width: 30px; display: inline-block;">
                                                                        </div>
                                                                    </div>
                                                                    <div *ngSwitchDefault>
                                                                        {{record.outsourcingApplyAmount}}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <!-- <td style="width: 120px">
                              0/0
                            </td> -->
                                                            <td style="width: 200px">
                                                                {{record.remark}}
                                                            </td>
                                                        </tr>
                                                    </ng-template>
                                                </p-table>
                                                <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                                    {{'NoData' | localize}}
                                                </div>
                                                <div class="primeng-paging-container">
                                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                        #paginator (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                                                    </p-paginator>
                                                    <span class="total-records-count">
                                                        {{'TotalRecordsCount' |
                                                        localize:primengTableHelper.totalRecordsCount}}
                                                    </span>
                                                </div>
                                            </div>
                                            <!--<Primeng-TurboTable-End>-->
                                        </div>
                                    </div>
                                </p-panel>
                            </div>
                            <div style="border: 1px solid #c7cdd9;border-top-left-radius:4px;border-top-right-radius: 4px;">
                                <p-panel header="外协任务" [toggleable]="true">

                                    <div class="align-items-center">
                                        <!--<Primeng-TurboTable-Start>-->
                                        <div class="primeng-datatable-container">
                                            <p-table #dataTable dataKey="taskForModelId" (onLazyLoad)="getOutsourcing($event)"
                                                [value]="Outsourcings" [lazy]="true" editMode='row' [scrollable]="true"
                                                ScrollWidth="100%">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 150px">
                                                            操作</th>
                                                        <th style="width: 130px">
                                                            任务号
                                                        </th>
                                                        <th style="width: 130px">
                                                            产品图号
                                                        </th>
                                                        <th style="width: 130px">
                                                            产品名称
                                                        </th>
                                                        <th style="width: 130px">
                                                            任务数量
                                                        </th>
                                                        <th style="width: 130px">
                                                            加工状态
                                                        </th>
                                                        <th style="width: 130px">
                                                            交付进度
                                                        </th>
                                                        <th style="width: 80px">
                                                            外包数量
                                                        </th>
                                                        <th style="width: 120px">
                                                            参考单价
                                                        </th>
                                                        <th style="width: 120px">
                                                            参考总价
                                                        </th>
                                                        <th style="width: 120px">
                                                            备注
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri='rowIndex'>
                                                    <tr [pEditableRow]='rowData'>
                                                        <td style="width: 150px">
                                                            <button *ngIf="!editing" pButton type="button" icon="pi pi-trash"
                                                                class="ui-button-info" style="margin-right: .5em"
                                                                (click)="deleteRow(rowData)"></button>
                                                            <button *ngIf="!editing" pButton type="button"
                                                                pInitEditableRow icon="pi pi-pencil" class="ui-button-info"
                                                                (click)="onRowEditInit(rowData)"></button>
                                                            <button *ngIf="editing" pButton type="button"
                                                                pSaveEditableRow icon="pi pi-check" class="ui-button-success"
                                                                style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                                                            <button *ngIf="editing" pButton type="button"
                                                                pCancelEditableRow icon="pi pi-times" class="ui-button-danger"
                                                                (click)="onRowEditCancel(rowData, ri)"></button>
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{rowData.taskCode}}
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{rowData.picNo}}
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{rowData.taskName}}
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{rowData.taskCount}}
                                                        </td>
                                                        <td style="width: 130px">
                                                            <!-- 加工状态 -->
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:70px;'
                                                                        name='deliveryRate' [(ngModel)]="rowData.workStatus"
                                                                        required>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.workStatus}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 130px">
                                                            <!-- 交付进度 -->
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:100%;'
                                                                        name='deliveryRate' [(ngModel)]="rowData.deliveryRate"
                                                                        required bsDatepicker>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.deliveryRate | momentFormat:'L'}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 80px">
                                                            <!-- 数量 -->
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:70px;'
                                                                        #outsourcingInput name='outsouringAmount'
                                                                        [(ngModel)]="rowData.outsouringAmount" required>
                                                                    <validation-messages [formCtrl]="outsourcingInput"></validation-messages>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.outsouringAmount}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 120px">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <div class="ui-inputgroup">
                                                                        <span class="ui-inputgroup-addon">¥</span>
                                                                        <input pInputText type="text" style='width:90px;'
                                                                            name='unitPrice' [(ngModel)]="rowData.unitPrice"
                                                                            required>
                                                                    </div>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.unitPrice}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 120px">
                                                            <!-- 准结工时 -->
                                                            {{rowData.unitPrice*rowData.outsouringAmount}}
                                                        </td>
                                                        <td style="width: 120px">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:120px;'
                                                                        #remarkInput name='remark' [(ngModel)]="rowData.remark"
                                                                        required>
                                                                    <validation-messages [formCtrl]="remarkInput"></validation-messages>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.remark}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-no-data" *ngIf="Outsourcings.length == 0">
                                                {{'NoData' | localize}}
                                            </div>
                                        </div>
                                    </div>

                                </p-panel>
                            </div>
                        </p-tabPanel>
                        <p-tabPanel header="审批人">
                            <div style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="Code">申请单位主管领导 </label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='workShopLeader' [(ngModel)]="stepusers.workShopLeader"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="Code">计划生产处型号主管 </label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='plannedProductionModelManager' [(ngModel)]="stepusers.plannedProductionModelManager"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label for="Code">计划生产处主管领导 </label>
                                    </div>
                                    <div class="form-group col-md-10">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='plannedProductionLeader' [(ngModel)]="stepusers.plannedProductionLeader"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>
                            </div>
                        </p-tabPanel>
                    </p-tabView>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        取消
                    </button>
                    <button type="submit" (click)="save()" class="btn btn-primary2" [disabled]="!userForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i> <span>提交</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
